<!DOCTYPE html>
<html lang="en">

	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no, email=no" />
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/vant.css">
		<link rel="stylesheet" type="text/css" href="../css/base.css" />
		<link rel="stylesheet" type="text/css" href="../css/local.css" />
		<script type="text/javascript" src="../script/jquery.js"></script>
		<script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
		<script type="text/javascript" src="../script/vue.min.js"></script>
		<script src="../script/vant.min.js"></script>
		<script type="text/javascript" src="../script/fastclick.js"></script>
		<script type="text/javascript" src="../script/base.js"></script>
		<style>
			.pd {
				padding: 10px;

			}

			.pd>div {
				background: #fff;
				overflow: hidden;
				border-radius: 6px;

			}

			.ov {
				overflow: hidden;
			}

			.p {
				padding: 5px;
			}

			.row {
				position: relative;
			}

			.row .img {
				width: 100px;
				height: 80px;
				border-radius: 4px;
				overflow: hidden;
			}

			.row .img img {
				width: 100%;
				height: 100%;
			}

			.row .desc {
				position: absolute;
				top: 0;
				left: 100px;
				right: 0;
				bottom: 0;
				padding-left: 5px;
			}

			.row .desc .title {
				font-size: 14px;
				height: 40px;
				line-height: 20px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.row .desc .title .hot {
				color: #fff;
				background: #cd1b21;
				font-size: 12px;
				border-radius: 2px;
				margin-right: 5px;
				display: inline-block;
				line-height: 16px;
				padding: 0 2px;
				vertical-align: middle;
			}

			.tag {
				position: relative;
				overflow: hidden;
			}

			.tag span {
				color: #cd1b21;
				border: 1px solid #ff6e73;
				font-size: 12px;
				border-radius: 2px;
				display: inline-block;
				line-height: 16px;
				padding: 0 2px;
				vertical-align: middle;
				transform: scale(0.8);
				-webkit-transform-origin-x: 0;
				float: left;
			}

			.tag span:first-child {
				margin-left: 0;
			}

			.row .desc .sub-title {
				font-size: 12px;
				color: #969799;
				line-height: 20px;
				height: 40px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.row .desc .sub-title * {
				vertical-align: middle;
			}

			.van-switch--on {
				background-color: #cd1b21;
			}

			.t>div {
				float: left;
				width: 33.33%;
			}

			.dd {
				color: #9e9e9e;
			}
		</style>

	</head>

	<body>
		<div id="app" v-cloak>
			<div class="init-full">
				<van-nav-bar class="head" title="收货地址编辑" left-arrow @click-left="onClickLeft"></van-nav-bar>
				<div class="body-with-bottom">
					<div class="content">
						<div>
							<van-cell-group>
								<van-field label="姓名" v-model="addressData.shipTo" placeholder="请输入姓名"></van-field>
								<van-field label="电话" v-model="addressData.cellphone" placeholder="请输入电话"></van-field>
								<van-field label="手机" type="tel" v-model="addressData.telphone" placeholder="请输入手机">
								</van-field>
								<!-- <van-field label="地区" v-model="addressData.area" placeholder="请选择省/市/区" readonly
                                @click="selectSSQ">
                                <van-icon slot="right-icon" name="arrow"></van-icon>
                            </van-field> -->
								<van-cell title="地区">
									<div class=" t">
										<div :class="!addressData.p?'dd':''" @click="selectPCA(1)">
											{{addressData.p || '请选择省份'}}
										</div>
										<div :class="!addressData.c?'dd':''" @click="selectPCA(2)">
											{{addressData.c || '请选择城市'}}
										</div>
										<div :class="!addressData.a?'dd':''" @click="selectPCA(3)">
											{{addressData.a || '请选择地区'}}
										</div>
									</div>

								</van-cell>
								<van-field label="街道" v-model="addressData.street" placeholder="请选择街道" readonly
									@click="selectPCA(4)">
									<van-icon slot="right-icon" name="arrow"></van-icon>
								</van-field>
								<van-field label="详细地址" v-model="addressData.address" placeholder="请输入详细地址"></van-field>

							</van-cell-group>
							<van-switch-cell title="是否默认" v-model="addressData.isdefault" style="margin-top: 10px;">
							</van-switch-cell>
							<div class="btn-padding">
								<van-button type="primary" class="login-out" block round @click="onSave">保存</van-button>
								<van-button type="default" class="login-out" block round @click="onDelete"
									style="margin-top:15px;" v-if="addressData.shippingId">删除</van-button>
							</div>
						</div>
					</div>
					<van-loading v-if="showLoading" />
				</div>
			</div>
			<!-- <van-popup v-model="showAreaPicker" position="bottom">
            <van-picker ref="pickerInit" show-toolbar title="省市区选择" :columns="areaArray" @change="chanbgeArea"
                @cancel="showAreaPicker = false" @confirm="onAreaConfirm"></van-picker>
        </van-popup> -->

			<van-popup v-model="showProvincePicker" position="bottom">
				<van-picker show-toolbar title="省份" :columns="provinceArray" @cancel="showProvincePicker = false"
					@confirm="onProvinceConfirm"></van-picker>
			</van-popup>

			<van-popup v-model="showCityPicker" position="bottom">
				<van-picker show-toolbar title="城市" :columns="cityArray" @cancel="showCityPicker = false"
					@confirm="onCityConfirm"></van-picker>
			</van-popup>

			<van-popup v-model="showAreaPicker" position="bottom">
				<van-picker show-toolbar title="区县" :columns="areaArray" @cancel="showAreaPicker = false"
					@confirm="onAreaConfirm"></van-picker>
			</van-popup>

			<van-popup v-model="showStreetPicker" position="bottom">
				<van-picker show-toolbar title="街道" :columns="streetArray" @cancel="showStreetPicker = false"
					@confirm="onStreetConfirm"></van-picker>
			</van-popup>
		</div>
	</body>
	<script type="text/javascript">
		var vm;
		//$('.init-full').show();

		vm = new Vue({
			el: '#app',
			data: {
				showLoading: false,
				serverIP: 'http://' + FLD.serverIP,
				shoppingMallServerIP: 'http://' + FLD.shoppingMallServerIP,
				addressData: {
					shippingId: 0,
					regionId: 0,
					shipTo: '',
					area: '',
					street: '',
					address: '',
					telphone: '',
					cellphone: '',
					isdefault: 0,
					fullregionpath: '',
					p: '',
					c: '',
					a: '',
					pid: 0,
					cid: 0,
					aid: 0
				},
				provinceArray: [],
				cityArray: [],
				areaArray: [],
				streetArray: [],
				showProvincePicker: false,
				showCityPicker: false,
				showAreaPicker: false,
				showStreetPicker: false
			},
			created: function() {
				var that = this;

				if (window.localStorage.getItem('addressInfo')) {
					var data = JSON.parse(window.localStorage.getItem('addressInfo'))
					that.addressData.shippingId = data.ShippingId;
					that.addressData.regionId = data.RegionId;
					that.addressData.shipTo = data.ShipTo;
					that.addressData.address = data.Address;
					that.addressData.telphone = data.TelPhone;
					that.addressData.cellphone = data.CellPhone;
					that.addressData.isdefault = data.IsDefault;
					that.addressData.fullregionpath = data.FullRegionPath;
					that.getDefualtArea();
				} else {
					// that.getProvince();
				}


			},
			methods: {
				selectPCA(index) {
					var that = this;
					if (index == 1) {
						FLD.ajax('sp_getRegion', {
							parentRegionId: 0
						}, function(res) {
							var array = []
							for (var i in res.ds) {
								array.push({
									id: res.ds[i].RegionId,
									text: res.ds[i].RegionName
								})
							}
							that.provinceArray = array;
							that.showProvincePicker = true;
						})
					} else if (index == 2) {
						FLD.ajax('sp_getRegion', {
							parentRegionId: that.addressData.pid
						}, function(res) {
							var array = []
							for (var i in res.ds) {
								array.push({
									id: res.ds[i].RegionId,
									text: res.ds[i].RegionName
								})
							}
							that.cityArray = array;
							that.showCityPicker = true;
						})
					} else if (index == 3) {
						FLD.ajax('sp_getRegion', {
							parentRegionId: that.addressData.cid
						}, function(res) {
							var array = []
							for (var i in res.ds) {
								array.push({
									id: res.ds[i].RegionId,
									text: res.ds[i].RegionName
								})
							}

							that.areaArray = array;
							that.showAreaPicker = true;

						})
					} else if (index == 4) {
						FLD.ajax('sp_getRegion', {
							parentRegionId: that.addressData.aid
						}, function(res) {
							var array = []
							for (var i in res.ds) {
								array.push({
									id: res.ds[i].RegionId,
									text: res.ds[i].RegionName
								})
							}

							that.streetArray = array;
							if (that.streetArray.length) {
								that.showStreetPicker = true;
							} else {
								layer.open({
									content: '暂无街道口可选!',
									skin: 'msg',
									time: 2
								});
							}


						})
					}
				},
				getDefualtArea() {
					var that = this;
					var fullregionpath = that.addressData.fullregionpath.split(',');
					FLD.ajax('sp_getRegion', {
						parentRegionId: 0
					}, function(res) {
						var row1 = [];
						var index1 = -1;
						var areaArray = [];
						for (var i in res.ds) {
							areaArray.push({
								id: res.ds[i].RegionId,
								text: res.ds[i].RegionName
							})
							if (res.ds[i].RegionId == parseInt(fullregionpath[0])) {
								row1 = [res.ds[i]];
								index1 = parseInt(i);
							}
						}
						if (row1.length) {
							that.addressData.p = row1[0].RegionName;
							that.addressData.pid = row1[0].RegionId;
						}

						FLD.ajax('sp_getRegion', {
							parentRegionId: row1[0].RegionId
						}, function(res) {
							var childrenArray = [];
							var row2 = [];
							var index2 = -1;
							for (var i in res.ds) {
								childrenArray.push({
									id: res.ds[i].RegionId,
									text: res.ds[i].RegionName
								})
								if (res.ds[i].RegionId == parseInt(fullregionpath[1])) {
									row2 = [res.ds[i]];
									index2 = parseInt(i);
								}
							}
							areaArray[index1].children = childrenArray;
							if (row2.length) {
								that.addressData.c = row2[0].RegionName;
								that.addressData.cid = row2[0].RegionId;
							}

							FLD.ajax('sp_getRegion', {
								parentRegionId: row2[0].RegionId
							}, function(res) {
								var childrenArray = [];
								var row3 = [];
								var index3 = -1;
								for (var i in res.ds) {
									childrenArray.push({
										id: res.ds[i].RegionId,
										text: res.ds[i].RegionName
									})
									if (res.ds[i].RegionId == parseInt(fullregionpath[2])) {
										row3 = [res.ds[i]];
										index3 = parseInt(i);
									}
								}
								areaArray[index1].children[index2].children = childrenArray;
								that.areaArray = areaArray;


								var row3 = res.ds.filter(function(item) {
									return item.RegionId == parseInt(fullregionpath[
										2]);
								})
								if (row3.length) {
									that.addressData.a = row3[0].RegionName;
									that.addressData.aid = row3[0].RegionId;
								}


								if (row3.length) {
									FLD.ajax('sp_getRegion', {
										parentRegionId: row3[0].RegionId
									}, function(res) {
										var streetArray = []
										for (var i in res.ds) {
											streetArray.push({
												id: res.ds[i].RegionId,
												text: res.ds[i].RegionName
											})
										}
										that.streetArray = streetArray;

										var row4 = res.ds.filter(function(item) {
											return item.RegionId == parseInt(
												fullregionpath[3]);
										})
										if (row4.length) {
											that.addressData.street = row4[0]
												.RegionName;
										}

									})
								}





							})

						})

					})
				},
				onProvinceConfirm(value, index) {
					var that = this;
					that.showProvincePicker = false;
					if (that.addressData.p != that.provinceArray[index].text) {
						that.cityArray = [];
						that.areaArray = [];
						that.streetArray = [];

						that.addressData.c = '';
						that.addressData.a = '';
						that.addressData.street = '';
					}
					that.addressData.p = that.provinceArray[index].text;
					that.addressData.pid = that.provinceArray[index].id;
					// that.addressData.fullregionpath = that.provinceArray[index].id.toString();
				},
				onCityConfirm(value, index) {
					var that = this;
					that.showCityPicker = false;
					if (that.addressData.c != that.cityArray[index].text) {
						that.areaArray = [];
						that.streetArray = [];

						that.addressData.a = '';
						that.addressData.street = '';
					}
					that.addressData.c = that.cityArray[index].text;
					that.addressData.cid = that.cityArray[index].id;
					// that.addressData.fullregionpath = that.addressData.fullregionpath + ',' + that.cityArray[index].id;


				},
				onAreaConfirm(value, index) {
					var that = this;
					that.showAreaPicker = false
					if (that.addressData.a != that.areaArray[index].text) {
						that.streetArray = [];

						that.addressData.street = '';
					}
					that.addressData.a = that.areaArray[index].text;
					that.addressData.aid = that.areaArray[index].id;
					// that.addressData.fullregionpath = that.addressData.fullregionpath + ',' + that.areaArray[index].id;


				},
				onStreetConfirm(value, index) {
					var that = this;
					that.showStreetPicker = false
					that.addressData.street = that.streetArray[index].text;
					that.addressData.regionId = that.streetArray[index].id;
					// that.addressData.fullregionpath = that.addressData.fullregionpath + ',' + that.streetArray[index].id;
				},

				onSave() {
					var that = this;
					if (!that.addressData.shipTo) {
						layer.open({
							content: '收货人姓名必填!',
							skin: 'msg',
							time: 2
						});
						return false;
					}
					if (!that.addressData.telphone) {
						layer.open({
							content: '手机号必填!',
							skin: 'msg',
							time: 2
						});
						return false;
					}
					if (!that.addressData.p || !that.addressData.c || !that.addressData.a || !that.addressData
						.address) {
						layer.open({
							content: '请输入完整的收货地址!',
							skin: 'msg',
							time: 2
						});
						return false;
					}
					if (that.addressData.street) {
						var array = [];
						array.push(that.addressData.pid);
						array.push(that.addressData.cid);
						array.push(that.addressData.aid);
						array.push(that.addressData.regionId);
						that.addressData.fullregionpath = array.join();
					} else {
						var array = [];
						array.push(that.addressData.pid);
						array.push(that.addressData.cid);
						array.push(that.addressData.aid);
						that.addressData.fullregionpath = array.join();
						that.addressData.regionId = that.addressData.aid;
					}
					if (that.addressData.shippingId) {
						FLD.ajax('sp_updateShipAddress', that.addressData, function(res) {
							// api.sendEvent({
							// 	name: 'refreshAddress'
							// });
							layer.open({
								content: '地址保存成功!',
								skin: 'msg',
								time: 2
							});

						})
					} else {
						FLD.ajax('sp_addShipCart', that.addressData, function(res) {
							// api.sendEvent({
							// 	name: 'refreshAddress'
							// });
							layer.open({
								content: '地址保存成功!',
								skin: 'msg',
								time: 2
							});
							that.addressData.shippingId = res.ds[0].shippingId;

						})
					}

				},
				onDelete() {
					var that = this;
					that.$dialog.confirm({
						title: '提示',
						message: '是否删除该收货地址?'
					}).then(() => {
						FLD.ajax('sp_deleteShipAddress', {
							shippingId: that.addressData.shippingId
						}, function(res) {
							// api.sendEvent({
							// 	name: 'refreshAddress'
							// });
							layer.open({
								content: '收货地址删除成功!',
								skin: 'msg',
								time: 2,
								end: function() {
									window.history.back();
								}
							});
						})
					}).catch(() => {

					});
				},
				onClickLeft() {
					window.history.back();
				}
			}
		})
	</script>

</html>